<template>
	<view class="content">
		<view class="top" style="position: fixed">
			<view class="select">
				<view style="width: 80%">
					<uni-easyinput :clearable="false" placeholder="请输入搜索内容" v-model="selectText" prefixIcon="1"></uni-easyinput>
				</view>
				<button
					style="margin-left: 10rpx; height: 64rpx; line-height: 70rpx; background-color: #0c6bff; color: white; width: 130rpx; font-size: 13px"
					@click="getList(true)"
				>
					搜索
				</button>
			</view>
			<view class="checked">
				<view class="selected" @click="showCheckType">{{ typeCheck }}</view>
				<view style="height: 26rpx; background-color: #f2f2f2ff; width: 1px"></view>
				<view class="selected" @click="showCheckLocation">{{ city.name ? city.name : '临沂市' }}</view>
			</view>
		</view>
		<view style="height: 160rpx"></view>
		<view v-if="list.length != 0" style="height: calc(100vh - 190rpx); width: 100%">
			<scroll-view style="height: calc(100vh - 170rpx)" scroll-y :scroll-top="scrollTop" @scrolltolower="fenye">
				<view class="project-list">
					<view class="project-info" v-for="(item, index) in list" :key="index" @click="goProjectInfo(item)">
						<view style="width: 100%; display: flex">
							<view class="info-left">
								<image :src="item.imageUrl ? baseUrl + item.imageUrl : '../../static/image/1.jpg'" />
							</view>
							<view class="info-right">
								<text style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 600">
									[{{ item.statusName ? item.statusName : '暂无' }}]{{ item.projectName }}
								</text>
								<text class="project-detail">当前竞价价格：{{ item.biddingPrice ? item.biddingPrice : 0 }}元</text>
								<text class="project-detail">挂牌价格：{{ item.listingPrice + item.unitName }}</text>
								<text class="project-detail">转出方式：{{ item.transferMethodName ? item.transferMethodName : '暂无' }}</text>
								<text class="project-detail">开始时间：{{ item.enrollStartTime ? item.enrollStartTime : '暂无' }}</text>
								<text class="project-detail">结束时间：{{ item.enrollEndTime ? item.enrollEndTime : '暂无' }}</text>
							</view>
						</view>
						<view
							style="
								width: 154rpx;
								height: 64rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								background-color: #136bffff;
								color: white;
								border-radius: 10rpx;
								font-size: 13px;
								margin-left: 230rpx;
								margin-top: 6rpx;
							"
							v-if="typeCheck == '报名项目'"
							@click="goApply(1, item)"
						>
							我要报名
						</view>
						<view
							style="
								width: 154rpx;
								height: 64rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								background-color: #136bffff;
								color: white;
								border-radius: 10rpx;
								font-size: 13px;
								margin-left: 230rpx;
								margin-top: 6rpx;
							"
							v-else-if="typeCheck == '竞价项目'"
							@click.stop="jingjia(item)"
						>
							{{
								item.biddingStatus == 1
									? '待签到'
									: item.biddingStatus == 2
									? '我要签到'
									: item.biddingStatus == 3
									? '已签到'
									: item.biddingStatus == 4
									? '我要竞价'
									: '无法竞价'
							}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="list.length == 0" style="height: calc(100vh - 390rpx); width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column">
			<image src="http://cdn.uviewui.com/uview/empty/list.png" style="width: 360rpx; height: 360rpx"></image>
			<p style="color: rgb(192, 196, 204)">列表为空</p>
		</view>
		<uni-popup ref="selectType">
			<view style="background-color: white; width: 100%; border: 1px solid white; padding: 50rpx 0">
				<view :style="{ 'margin-top': isMap ? '170rpx' : '' }">
					<view v-for="(item, index) in type" :key="index" style="display: flex; justify-content: center" @click="checkType(item)">
						<view style="display: flex; width: 90%; justify-content: center; height: 100rpx; align-items: center; border-bottom: 1px solid #666">
							<view>{{ item }}</view>
							<uni-icons type="checkmarkempty" size="40" v-show="typeCheck == item"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<check-city ref="selectLocation" @change="changeCity"></check-city>
	</view>
</template>

<script>
import { electBidding, mineProject } from '@/utils/api.js';
import checkCity from '../../components/checkCity/checkCity.vue';
export default {
	components: { checkCity },
	data() {
		return {
			type: ['报名项目', '竞价项目', '结束项目'],
			typeCheck: '报名项目',
			locations: ['临沂市', '兰山区', '河东区', '郯城县', '兰陵县', '沂水县', '沂南县', '平邑县', '费县', '蒙阴县', '莒南县', '临沭县'],
			city: uni.getStorageSync('nowCity'),
			locationCheck: '临沂市',
			list: [],
			baseUrl: this.$baseUrl,
			isMap: false,
			selectText: '',
			nowPageNum: 1,
			scrollTop: 0
		};
	},
	onShow() {
		this.getList(true);
		let port = uni.getSystemInfoSync().platform;
		if (port == 'android' || port == 'ios') {
			this.isMap = false;
		} else {
			this.isMap = true;
		}
	},
	onLoad() {},
	methods: {
		fenye() {
			this.nowPageNum++;
			this.getList(false);
		},
		async getList(e) {
			console.log(this.city);
			let res = {};
			if (this.typeCheck == '报名项目') {
				res = await electBidding.getSupplyProject({
					pageNum: this.nowPageNum,
					pageSize: 10,
					areaId: this.city.id,
					level: this.city.level,
					xmname: this.selectText,
					isAsc: 'desc',
					orderByColumn: 'fbsj'
				});
			} else if (this.typeCheck == '竞价项目') {
				res = await electBidding.getBiddingSupplyProject({
					pageNum: this.nowPageNum,
					pageSize: 10,
					areaId: this.city.id,
					level: this.city.level,
					xmname: this.selectText,
					isAsc: 'desc',
					orderByColumn: 'fbsj'
				});
			} else {
				res = await electBidding.getFinishSupplyProject({
					pageNum: this.nowPageNum,
					pageSize: 10,
					areaId: this.city.id,
					level: this.city.level,
					xmname: this.selectText,
					isAsc: 'desc',
					orderByColumn: 'fbsj'
				});
			}
			console.log(res);
			if (e) {
				this.list = res.data.rows;
			} else {
				// this.list.push(res.data.rows);
				this.list = [...this.list, ...res.data.rows];
			}
		},
		changeCity(e) {
			this.city = e;
			console.log(e);

			// 初始页面设为0
			this.nowPageNum = 1;
			// scroll滚回最上方
			this.scrollTop = -1;
			this.$nextTick(function () {
				this.scrollTop = 0;
			});
			this.getList(true);
		},
		showCheckType() {
			this.$refs.selectLocation.close();
			this.$refs.selectType.open('top');
		},
		async checkType(e) {
			let res = await mineProject.getGrEnrollSupplyProject({
				pageNum: 0,
				pageSize: 10
			});
			if (res.code == '401001' || res.code == '401002') {
				uni.showModal({
					title: '登录状态过期或未登录',
					content: '是否立即登录',
					cancelText: '取消', // 取消按钮的文字
					confirmText: '确认', // 确认按钮的文字
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							}); //点击确定之后执行的代码
						} else {
							console.log('cancel'); //点击取消之后执行的代码
						}
					}
				});
				this.$refs.selectType.close();
			} else {
				this.typeCheck = e;
				// 初始页面设为0
				this.nowPageNum = 1;
				// scroll滚回最上方
				this.scrollTop = -1;
				this.$nextTick(function () {
					this.scrollTop = 0;
				});
				this.getList(true);
				this.$refs.selectType.close();
			}
		},
		showCheckLocation() {
			this.$refs.selectType.close();
			this.$refs.selectLocation.open('top');
		},

		checkLocation(e) {
			this.locationCheck = e;
			this.$refs.selectLocation.close();
		},
		async goApply(e, data) {
			let res = await mineProject.getGrEnrollSupplyProject({
				pageNum: 0,
				pageSize: 10
			});
			if (res.code == '401001' || res.code == '401002') {
				uni.showModal({
					title: '登录状态过期或未登录',
					content: '是否立即登录',
					cancelText: '取消', // 取消按钮的文字
					confirmText: '确认', // 确认按钮的文字
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							}); //点击确定之后执行的代码
						} else {
							console.log('cancel'); //点击取消之后执行的代码
						}
					}
				});
			} else {
				if (e == 1) {
					uni.navigateTo({
						url: '/pages/electBidding/apply?data=' + JSON.stringify(data)
					});
				} else {
					uni.navigateTo({
						url: '/pages/electBidding/bidding'
					});
				}
			}
		},
		async jingjia(e) {
			if (e.biddingStatus == 2) {
				e.biddingStatus = 3;
				let res = await electBidding.projectSign({ id: e.id });
				console.log(res);
			} else if (e.biddingStatus == 4) {
				uni.navigateTo({
					url: '/pages/electBidding/bidding?data=' + JSON.stringify(e)
				});
			}
			// if (e.signStatus == 0) {
			// e.signStatus = 1;
			// let res = await electBidding.projectSign({ id: e.id });
			// console.log(res);
			// } else if (e.biddingStatus == 4) {
			// uni.navigateTo({
			//   url: "/pages/electBidding/bidding?data=" + JSON.stringify(e),
			// });
			// }
		},
		goProjectInfo(e) {
			uni.navigateTo({
				url:
					'/pages/supplyDetails/supplyDetails?data=' +
					JSON.stringify({
						projectId: e.id,
						dataId: e.dataId,
						dataType: e.dataType
					})
			});
		}
	}
};
</script>

<style scoped lang="less">
.content {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	.top {
		width: 100%;
		z-index: 1000;
		background-color: white;
		box-shadow: 0px 2px 2px #e5e5e580;
		display: flex;
		flex-direction: column;
		align-items: center;
		.select {
			display: flex;
			width: 90%;
			height: 80rpx;
			align-items: center;
			justify-content: space-between;
		}
		.checked {
			display: flex;
			width: 100%;
			margin-top: 10rpx;
			align-items: center;
			justify-content: space-between;
			.selected {
				flex: 1;
				height: 76rpx;
				font-size: 14px;
				color: #5b5b5bff;
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
.project-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.project-info {
		width: 92%;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 28rpx;
		border-bottom: 1px solid #f3f3f3ff;
		.info-left {
			image {
				width: 220rpx;
				height: 300rpx;
				border-radius: 10rpx;
			}
		}
		.info-right {
			width: 470rpx;
			margin-left: 14rpx;
			display: flex;
			justify-content: space-around;
			flex-direction: column;
			.project-detail {
				font-size: 13px;
				color: #828282ff;
			}
		}
	}
}
</style>
